import React, { useState } from "react"
import ViewHeader from 'Co/ViewHeader';
import { connect } from "react-redux";

import './Personal.less'
import action from '@/store/action'
import { Image, List, } from 'antd-mobile'

  

const Personal = function (props) {
    const { navigate, CLEAR_USERINFO  ,loginInfo} = props,
    [username,setUserName] = useState(loginInfo?.username)

    const goStore = () => {
        navigate('/store')
    }


    const clearUserInfo = () => {
        CLEAR_USERINFO()
        navigate('/')

    }


    return (
        <>
            <div className="personal-box">
                <ViewHeader title="个人中心" navigate={navigate} />
                <div className="userPic">
                    <Image
                        lazy
                        src={require(`../assets/images/${'default-login.webp'}`)}
                        width={64}
                        height={64}
                        fit='cover'
                        style={{ borderRadius: 4 }}
                    />
                    <div className="user">{username}</div>
                </div>
                <div className="person-list">
                    <List >
                        <List.Item   onClick={goStore}>
                            我的收藏
                        </List.Item>
                        <List.Item   onClick={clearUserInfo}>
                            退出登录
                        </List.Item>

                    </List>

                </div>
            </div>;
        </>
    )

}

export default connect(
    store => store.login,
    action.login
)(Personal)